<template>
<!-- add_time: "15小时前"
detail_text: "少量破洞可以接受。"
hash_str: "ZGM2MW"
id: 2233
origin: "临沂"
price: 0
rec: 1
size: "不限"
title: "求购上好的木皮"
type: "杨木"
unit: "m³"
update_time: "15小时前" -->
    <el-table :data="demands" height="600px" style="width: 100%" v-loading="loading">
        <el-table-column 
            fixed="left"
            prop="id"
            label="id"
            width="80px">
        </el-table-column>
        <el-table-column 
            prop="title"
            label="标题"
            width="200px">
        </el-table-column>
         <el-table-column 
            prop="type"
            label="种类"
            width="100px">
        </el-table-column>
         <el-table-column 
            prop="size"
            label="规格"
            width="200px">
        </el-table-column>
         <el-table-column 
            prop="add_time"
            label="添加时间"
            width="200px">
        </el-table-column>
         <el-table-column 
            prop="update_time"
            label="修改时间"
            width="200px">
        </el-table-column>
         <el-table-column 
            prop="detail_text"
            label="需求详细描述"
            width="200px">
        </el-table-column>
         <el-table-column 
            prop="unit"
            label="单位"
            width="80px">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100px">
            <template #default="scope">
                <el-button type="text" size="small" @click="handleEdit(scope)">修改</el-button>
                <el-button type="text" size="small" @click="handleDel(scope)">删除</el-button>
            </template>
        </el-table-column>
        
        
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :total="count">
    </el-pagination>
    
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { adminDemand } from '@/api/content.js'

export default {
    name: "DemandTable",
    data(){
        return {
            currentPage: 1,
        }
    },
    computed: {
        ...mapState('ad', [
            'demands',
            'loading',
            'count'
        ])
    },
    methods: {
        ...mapMutations('ad', [
            'setEditDemand',
            'getDemands',
            'spliceDemand',
            'setLoading',
        ]),
        async handleEdit(scope){
            await this.setEditDemand(scope)
        },
        async handleDel(scope){
            console.log('id', scope.row.id)
            this.setLoading(true)
            await adminDemand.del(scope.row.id)
            this.setLoading(false)
            this.$message({
                showClose: false,
                type: 'success',
                message: '删除成功'
            })
            this.spliceDemand(scope.index_);
        },
        handleCurrentChange(page){
            this.getDemands(page);
        }
    },
    created(){
        this.getDemands(1)
    }
    
}
</script>